<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Path computing</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html {
      overflow: hidden;
      font-family: Arial, Helvetica, sans-serif;
      user-select: none;
    }

    body {
      width: 100vw;
      height: 100vh;
    }

    .page {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
    }

    .full-size {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    #playground {
      width: 100%;
      height: 100%;
    }

    .top-bar {
      position: absolute;
      z-index: 3;
      top: 10px;
      left: 10px;
    }
    select, button {
      background-color: #FFFFFF88;
    }
    
    .radio-box {
      display: inline-block;
      position: absolute;
      z-index: 3;
      top: 40px;
      left: 10px;
    }

  </style>
  <link rel="stylesheet" type="text/css" href="../css/drawer.css">
</head>
<body>
  <script src="../lib/numeric.js"></script>
  <script src="../lib/svd.js"></script>
  <div class="page" >
    <div id="box" class="full-size">
      <canvas id="playground"/>
    </div>
    <div class="top-bar">
      <select id="setPoints">
        <option>--设置起飞点</option>
        <option>设置相机焦点</option>
        <option>设置无人机起飞点</option>
        <option>设置无人机校准点</option>
      </select>
      <select id="pickDirs">
        <option>--设置固定视角</option>
        <option>设置采样空间</option>
        <option>采样凸包轮廓</option>
        <option>结束方位采样</option>
        <option>找辅助平面(立面）</option>
        <option>找辅助平面(非立面）</option>
        <option>导出辅助平面</option>
        <option>导入辅助平面</option>
        <option>选定非平面工作区</option>
        <option>设置三维凸包采样空间</option>
        <option>采样三维凸包网格</option>
      </select>
      <input type="file" id="jsonInput" style="display: none" accept="application/json"/>
      <select id="createItems">
        <option>--规划工作区</option>
        <option>创建工作区</option>
        <option>创建不可喷涂区</option>
        <option>编辑不可喷涂区</option>
        <option>标定障碍物</option>
        <option>标定航点</option>
        <option>标定纬度等值线</option>
        <option>标定经度等值线</option>
        <option>给选中的等值线追加采样点</option>
        <option>新增曲面网格顶点</option>
      </select>
      <button id="saveBtn">保存方案</button>
      <button id="computeCornersBtn" style="display: none">计算喷涂死角</button>
      <button id="setStartEndBtn" style="display: none">设置寻路的起点和终点</button>
      <button id="computePath" style="display: none">开始寻路</button>
      <button id="markRagFaces" style="display: none">毛刺面标记</button>
      <button id="removeRagFaces" style="display: none" title="剔除标记的毛刺面">剔除毛刺面</button>
      <button id="testRoute" style="display: none">test route</button>
<!--      <button id="testFly" >test fly</button>-->
      <select id="pathConstraints">
        <option>--航向约束 （无）</option>
        <option>选中航点的水平面</option>
        <option>选中航点的竖直面</option>
        <option>旋转约束平面（特定角度）</option>
      </select>
      <select id="pointAdhere">
        <option>--航点吸附（无）</option>
        <option>新增选中航点的水平面吸附</option>
        <option>新增选中航点的竖直面吸附</option>
        <option>新增旋转吸附平面（特定角度）</option>
        <option>清除所有新增的吸附平面</option>
      </select>
      <select id="pointEdit">
        <option>--航点编辑 （无）</option>
        <option>新增航线</option>
        <option>从选中航点的尾新增</option>
        <option>从选中航点的首新增</option>
        <option>从选中法向采样点的尾新增</option>
      </select>
      <span>
        偏移距离
        <input type="range" min="0.3" max="3" step="0.1" value="2" id="hOffset">
<!--        创建视口平齐区域-->
<!--        <input type="checkbox" id="cbAlignEye" name="cbAlignEye">-->
        显示三维凸包
        <input type="checkbox" id="cbShowConvex" name="cbShowConvex">
        Φ
        <input type="range" min="5" max="90" step="1" value="5" id="phiSlider">
        θ
        <input type="range" min="0" max="100" step="1" value="5" id="thetaSlider">
      </span>
      <div class="color-plate" >
        <div class="search-colors-box">
          <input
            class="search-color-plate"
            maxLength="50"
          />
          <span id="selectedColor"></span>
          <button class="icon-box"}>
            应用颜色
          </button>
        </div>
        <div class="color-bricks arrow-drawer-wrapper" id="colorBricks">

        </div>

      </div>
    </div>
    <fieldset class="radio-box">
      <legend>偏移类型</legend>
      <div>
        <input type="radio" id="rdH" name="offsetType" value="h" checked>
        <label for="rdH">水平偏移</label>
        <input type="radio" id="rdV" name="offsetType" value="v">
        <label for="rdV">竖直偏移</label>
      </div>
    </fieldset>
  </div>
</div>
<script src="./main.js" type="module">
</script>

</body>
</html>
